<template>
  <div id="leftbottom">
   <h1>情感分析</h1>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {

   mounted (){
    var chartDom = document.getElementById('leftbottom');
var myChart = echarts.init(chartDom,'vintage');
var option;

option = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: '情感分析',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: '喜' },
        { value: 735, name: '怒' },
        { value: 580, name: '哀' },
        { value: 484, name: '乐' },
        { value: 300, name: '悲' }
      ]
    }
  ]
};

option && myChart.setOption(option);

   }
}
</script>

<style scoped>
#leftbottom {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Arial', sans-serif;
}
</style>
